<template>
  <div>
    <h1>基础用法</h1>
    <ul>
      <li>{{ a }}</li>
      <li>{{ b }}</li>
      <li>{{ c }}</li>
      <li>{{ obj.name + ":" + obj.age }}</li>
      <li>{{ arr[1] }}</li>
      <li>{{ arr[2] }}</li>
      <li>{{ arr[2]["b"] }}</li>
      <li>{{ 1 + 2 }}</li>
      <li>{{ obj.age >= 18 ? "已成年" : "未成年" }}</li>
    </ul>

    <!-- 
      1.v-text 只能渲染字符串 -> innerText
      2.v-html 既能渲染字符串也能渲染html标签 -> innerHTML -> 场景：渲染新闻页面时，内容既有标题，图片也有字符串，就可以使用v-html
      3.v-show性能更好，如果频繁切换最好使用v-show，
    -->
    <p v-text="txt"></p>
    <p v-html="txt"></p>

    <!-- 条件渲染(控制元素是否显示/渲染)
      1.v-show='vue变量/逻辑表达式/bool值'，通过display属性控制
      2.v-if='vue变量'，通过元素的创建和移除控制
    -->
    <p v-show="!isShow">我是v-show</p>
    <p v-if="isCreate">我是v-if</p>
    <p v-else>我是v-else</p>

    <!-- 双向绑定 -->
    <input type="text" v-model="a" />
  </div>
</template>

<script>
/**
 * js逻辑：
 * 1.在data函数中定义使用的变量-->任意数据类型
 * 2.在template中借助插值表达式(胡子语法)--> {{变量名/简单表达式运算和拼接/三元表达式}}
 */
export default {
  data() {
    // 固定格式，定义vue数据变量的函数
    return {
      // 以key: value的形式定义变量
      a: 1,
      b: "str",
      c: null,
      obj: {
        name: "zh",
        age: 18,
      },
      arr: [1, 2, { a: 10, b: 20 }],
      txt: "<h1>Hi,Vue</h1>",
      isShow: false,
      isCreate: true,
    };
  },
};
</script>

<style>
</style>